<template>
  <div class="container">
    <div class="logo">
      <div class="BigTitle" id="Title">
        <img
          v-if="ifKanBanTitleSrc"
          :src="kanBanTitleSrc"
          width="25"
          height="25"
          class="logo-icon"
        />
        <span
          class="titleTxt"
          @click="ResetView()"
          :class="[
            kanBanTitle.length >= 12 && kanBanTitle.length < 14
              ? 'set_small_titleTxt'
              : '',
            kanBanTitle.length >= 14 && kanBanTitle.length <= 15
              ? 'set_mini_small_titleTxt'
              : '',
            kanBanTitle.length > 15 ? 'set_other_small_titleTxt' : '',
            ifKanBanTitleSrc &&
            kanBanTitle.length >= 12 &&
            kanBanTitle.length < 14
              ? 'set_small_titleTxt_logo'
              : '',
            ifKanBanTitleSrc &&
            kanBanTitle.length >= 14 &&
            kanBanTitle.length <= 15
              ? 'set_small_titleTxt_logo'
              : '',
            ifKanBanTitleSrc && kanBanTitle.length > 14
              ? 'set_small_titleTxt_logo'
              : '',
          ]"
        >
          {{ kanBanTitle }}</span
        >
      </div>
      <div class="header_date_time">
        <p class="topTime" v-html="todayDate"></p>

        <div class="orgName">
          {{ vueX.deptName }}
        </div>

        <svg-icon icon-class="new_setting" @click.stop="openSetting"></svg-icon>
      </div>
    </div>
    <div
      class="setting"
      v-if="settingVisible"
      @mouseenter="headerSettingEnter"
      @mouseleave="headerSettingLeave"
    >
      <div class="settingInfo">
        <div class="settingBall">{{ vueX.orgName && vueX.orgName[0] }}</div>
        <div class="settingBody">
          <div class="settingBodyTop">
            <div class="settingOrgName">
              {{ vueX.orgName }}
            </div>
          </div>

          <div class="settingBodyBottom" v-if="!!vueX.userType">组织部门</div>

          <div v-else class="settingBodyBottom">
            <div class="settingUserName">
              {{ vueX.userName }}
            </div>

            <div class="settingDeptName">
              {{ vueX.deptName }}
            </div>
          </div>
        </div>
      </div>

      <div
        class="settingContent settingOrg"
        :class="{ selectSetting: settingType === 2 }"
        v-if="vueX.orgDeptList.length > 1"
        @click="settingTypeChange(2)"
      >
        切换组织
        <svsettingTagg-icon icon-class="jiantouYou"></svsettingTagg-icon>
        <div class="orgList" v-if="settingType === 2">
          <div
            v-for="org in vueX.orgDeptList"
            :key="org.dept_id"
            class="orgBox"
            @click.stop="changeOrg(org)"
          >
            <div class="orgTitle">
              {{ org.dept_name && org.dept_name[0] }}
            </div>
            <div class="orgBody">
              <div class="orgName">{{ org.dept_name }}</div>
              <div class="orgAddress">{{ org | orgAddressFilter }}</div>
            </div>
            <div class="orgFooter">
              <svg-icon
                icon-class="new_gou"
                v-if="vueX.orgId == org.dept_id"
              ></svg-icon>
            </div>
          </div>
        </div>
      </div>

      <div
        class="settingContent settingDept"
        :class="{ selectSetting: settingType === 3 }"
        v-if="
          selectOrg && selectOrg.department && selectOrg.department.length > 1
        "
        @click="settingTypeChange(3)"
      >
        切换部门
        <svg-icon icon-class="jiantouYou"></svg-icon>
        <div class="deptList" v-if="settingType === 3">
          <div
            class="deptBox"
            v-for="dept in selectOrg.department"
            :key="dept.dept_id"
            @click.stop="changeDept(dept)"
          >
            <div class="deptName">{{ dept.dept_name }}</div>
            <div class="deptFooter">
              <svg-icon
                icon-class="new_gou"
                v-if="vueX.deptId == dept.dept_id"
              ></svg-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="settingExit" @click="logout">退出登录</div>
    </div>
  </div>
</template>

<script>
import store from "@/store";

import { loginRecord } from "@/api/login";

var mouseTimer = null;

export default {
  name: "Nav",
  props: {},
  filters: {
    orgAddressFilter(org) {
      if (!!org.org_province) {
        if (!!org.org_city) {
          if (!!org.org_county) {
            return (
              org.org_province + " / " + org.org_city + " / " + org.org_county
            );
          } else {
            return org.org_province + " / " + org.org_city;
          }
        } else {
          return org.org_province;
        }
      } else {
        return "无区域信息";
      }
    },
  },
  data() {
    return {
      todayDate: "",
      kanBanTitle: "综合飞一次",
      ifKanBanTitleSrc: false,
      kanBanTitleSrc: "",
      timeer: null,
      vueX: {},

      selectOrg: {},
      settingVisible: false,
      settingType: 0, // 2-切换组织 3-切换部门
    };
  },
  watch: {},
  computed: {},
  components: {
    // NavLogin,
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },

  created() {
    this.vueX = store.getters;
    console.log("vueX", this.vueX);
    let config = this.vueX.kanBanConfig;

    if (!!config.title) {
      this.kanBanTitle = config.title;
    }
    this.ifKanBanTitleSrc = !!config.logo;
    this.kanBanTitleSrc = config.logo;
    //
    this.vueX.kanBanTitle = this.kanBanTitle;
    let $favicon = document.querySelector('link[rel="icon"]');
    if ($favicon !== null) {
      $favicon.href = config.favicon_logo
        ? config.favicon_logo
        : "https://fsimage.guihuao.com/oper_log/miniapp/fc5cc2fae62be9ddf0e8d5333a317968.png";
    } else {
      $favicon = document.createElement("link");
      $favicon.rel = "icon";
      $favicon.href = config.favicon_logo
        ? config.favicon_logo
        : "https://fsimage.guihuao.com/oper_log/miniapp/fc5cc2fae62be9ddf0e8d5333a317968.png";
      document.head.appendChild($favicon);
    }
  },
  mounted() {
    this.timeer = setInterval(this.getTime, 1000);
    document.title = this.kanBanTitle;
  },
  methods: {
    // 设置 鼠标移入事件
    headerSettingEnter() {
      clearInterval(mouseTimer);
      mouseTimer = null;
    },
    // 设置 鼠标移出事件
    headerSettingLeave() {
      mouseTimer = setTimeout(() => {
        this.settingVisible = false;
      }, 1000);
    },
    // 打开设置
    openSetting() {
      this.settingType = 0;
      if (!this.settingVisible) {
        this.selectOrg = this.vueX.orgDeptList.find((org) => {
          return org.dept_id == this.vueX.orgId;
        });
      }
      this.settingVisible = !this.settingVisible;

      if (this.settingVisible) {
        mouseTimer = setTimeout(() => {
          this.settingVisible = false;
        }, 1000);
      } else {
        clearInterval(mouseTimer);
        mouseTimer = null;
      }
    },
    // 打开切换部门组织
    settingTypeChange(type) {
      this.settingType = type;
      switch (type) {
        case 2:
          break;
        case 3:
          break;
        default:
          break;
      }
    },
    // 切换组织
    async changeOrg(org) {
      console.log(org);
      store.dispatch("user/setOrgInfo", org);
      if (org.lng && org.lat) {
        localStorage.setItem("org_lat_lng", org.lng + "," + org.lat);
      } else {
        localStorage.setItem("org_lat_lng", "");
      }
      await loginRecord({
        dept_id: org.department[0].dept_id,
        p_id: org.dept_id,
      });

      location.reload();
    },
    // 切换部门
    async changeDept(dept) {
      store.dispatch("user/setDeptInfo", dept);
      if (dept.lng && dept.lat) {
        localStorage.setItem("org_lat_lng", dept.lng + "," + dept.lat);
      } else {
        localStorage.setItem("org_lat_lng", "");
      }
      await loginRecord({
        dept_id: dept.dept_id,
        p_id: dept.p_id,
      });

      location.reload();
    },
    // 退出
    logout() {
      let that = this;
      that
        .$confirm("退出后,你将无法查看相关组织数据", "确认退出当前账号吗？", {
          cancelButtonText: "取消",
          confirmButtonText: "退出",
          type: "warning",
          confirmButtonClass: "confirmDelButton",
          // iconClass: "el-icon-warning confirmLoginOut",
        })
        .then((res) => {
          that.$store.dispatch("user/logout");
          if (localStorage.getItem("isShowTitleText")) {
            that.$router.push({
              path: "/login",
              query: { agent: "0001" },
            });
          } else {
            that.$router.push(`/login`);
          }
        })
        .catch((err) => {});
    },

    navTo(token) {
      console.log(window.location.href);
      var href = window.location.href + "?token=" + token;
      window.open(href, "_parent", "");
    },
    getTime() {
      var myDate = new Date();
      var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      var myToday = myDate.getDate(); //获取当前日(1-31)
      var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
      var myHour = myDate.getHours(); //获取当前小时数(0-23)
      var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
      var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
      var week = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      var nowTime;

      nowTime =
        myYear +
        "年" +
        this.fillZero(myMonth) +
        "月" +
        this.fillZero(myToday) +
        "日 &nbsp;&nbsp;" +
        week[myDay] +
        "&nbsp;&nbsp;" +
        this.fillZero(myHour) +
        ":" +
        this.fillZero(myMinute) +
        ":" +
        this.fillZero(mySecond);

      this.todayDate = nowTime;
    },
    fillZero(str) {
      var realNum;
      if (str < 10) {
        realNum = "0" + str;
      } else {
        realNum = str;
      }
      return realNum;
    },
    ResetView() {
      this.$bus.emit("EarthResetView", "");
    },
  },
  beforeDestroy() {
    clearInterval(this.timeer);
    this.timeer = null;
  },
};
</script>

<style lang="scss" scoped>
$listWidth: 350px;
$listLeft: -352px;
.container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  // background-image: url('~@/assets/left.png'), url('~@/assets/right.png');
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: vw(162) vh(1025), vw(162) vh(1025);
  background-position: 0 vh(55), vw(1758) vh(55);
  pointer-events: none;
  .logo {
    height: vh(75);
    text-align: center;
    position: relative;
    background-image: url("~@/assets/header.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    text-align: center;
    .BigTitle {
      font-family: mFont;
      font-size: 31px;

      width: 100%;
      // line-height: vh(60);
      height: 80%;
      align-items: center;
      letter-spacing: 6px;
      background-image: -webkit-linear-gradient(bottom, #55aaff, #ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: flex;
      justify-content: center;
      cursor: pointer;

      .titleTxt {
        pointer-events: auto;
        padding-left: 2px;
      }
      .set_small_titleTxt {
        font-size: vw(26);
        letter-spacing: vw(5);
        padding-left: 2px;
      }
      .set_mini_small_titleTxt {
        font-size: vw(22);
        letter-spacing: vw(5);
        padding-left: 2px;
      }
      .set_max_small_titleTxt {
        font-size: vw(22);
        letter-spacing: vw(5);
        padding-left: 2px;
      }

      .set_other_small_titleTxt {
        font-size: vw(21);
        letter-spacing: vw(5);
        padding-left: 2px;
      }
      .logo-icon {
        // margin-top: 13px;
        margin-right: 10px;
      }
      .spot {
        width: 15px;
        height: 15px;
        padding: 10px;
        border-radius: 15px;
        border: 1px solid rgba(0, 255, 255, 0.1);
        margin: 25px 60px;
        box-shadow: 0 0 2px rgba(0, 255, 255, 0.1);
        cursor: pointer;
      }
      .spot:hover {
        border: 1px solid rgba(0, 255, 255, 0.3);
        box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
      }
    }
    .header_date_time {
      position: absolute;
      top: 5px;
      right: 20px;
      font-size: 14px;
      z-index: 11;
      color: #75d9ff;
      display: flex;
      font-weight: bold;
      pointer-events: auto;
      p {
        margin: 0;
      }
      .orgName {
        margin: 0 5px;
      }
      .svg-icon {
        cursor: pointer;
      }
    }
  }
  .setting {
    pointer-events: auto;
    position: absolute;
    top: 40px;
    right: 20px;
    background-color: #fff;
    width: 380px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    .selectSetting {
      background-color: #d7d7d7;
    }
    .settingInfo {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ccc;
      .settingBall {
        margin: 10px;
        width: 60px;
        height: 60px;
        background-color: #00cbb0;
        color: #fff;
        font-size: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
      }
      .settingBody {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-right: 10px;
        .settingBodyTop {
          display: flex;
          margin-bottom: 7px;
          .settingOrgName {
            height: 25px;
            font-size: 20px;
            margin-right: 5px;
          }
        }
        .settingBodyBottom {
          display: flex;
          font-size: 13px;
          color: #999;
          .settingUserName {
            margin-right: 5px;
          }
          .settingDeptName {
          }
        }
      }
    }
    .settingOrg {
      position: relative;
      .orgList {
        position: absolute;
        background-color: #fff;
        top: 0px;
        right: 385px;
        width: 500px;
        max-height: 450px;
        border-radius: 10px;
        overflow: auto;
        .orgBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .orgTitle {
            background-color: #4a86ff;
            color: #fff;
            border-radius: 5px;
            font-size: 25px;
            margin: 20px;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .orgBody {
            flex: 1;
            .orgName {
              margin-bottom: 10px;
              font-weight: 700;
              font-size: 20px;
            }
            .orgAddress {
              color: #ccc;
            }
          }
          .orgFooter {
            .svg-icon {
              font-size: 25px;
              margin-right: 20px;
              color: #027db4;
            }
          }
        }
      }
    }
    .settingDept {
      position: relative;
      .deptList {
        position: absolute;
        width: $listWidth;
        max-height: 450px;
        overflow: auto;
        background-color: #fff;
        top: 0px;
        left: $listLeft;
        border-radius: 10px;
        .deptBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px;
          .deptName {
          }
          .deptFooter {
            .svg-icon {
              font-size: 15px;
              color: #027db4;
            }
          }
        }
      }
    }
    .settingContent {
      cursor: pointer;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .icon-class {
        font-size: 20px;
        color: #999;
        font-weight: 700;
      }
      &:hover {
        background-color: #d7d7d7;
      }
    }
    .settingExit {
      cursor: pointer;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #ccc;
      &:hover {
        background-color: #d7d7d7;
      }
      border-radius: 0 0 10px 10px;
    }
  }
}
</style>
